Gatsbyの「インクリメンタルビルド」がたくさんあるので整理した。
ベルリンオフィスの小西です。
Gatsbyでは、ビルド処理の効率化のためにインクリメンタルビルドという仕様があります。これはコードやデータソースの変更内容に基づき、更新が必要なHTMLファイルのサブセットのみを生成することで、ビルドの高速化を図る機能です。
非常に便利な機能で、静的サイトであることを意識させないくらい高速なビルドを行うことも可能なのですが、困ったことにGatsbyには「インクリメンタルビルド」と名のつくビルド方法が複数あります。
それぞれ動作する条件や環境が異なるため、今回はGatsbyサポートにもヒアリングしつつ、それぞれの概要を整理してみました。
各ビルドの説明
Incremental buildsと名のつくビルド方法は、大きく分けて3つあります。
1. Incremental builds
Gatsbyのバージョン3からコアとして組み込まれている、インクリメンタルビルドの基本そのものの機能です。
.cache と public ディレクトリを仕様して差分を管理するため、ローカル環境でも動作します。
Gatsbyのバージョンが古すぎなければ、特段意識しなくても無料で利用できる機能になります。
2. Incremental Cloud Builds
ややこしいですがこちらは「Incremental "Cloud" Builds」という名称で、ローカル環境では動作せず、Gatsby Cloud上の特定の環境で動作します。
現状理論的に、Gatsbyで最も効率的かつ速度が出るビルド方法がこれになります。
Gatsbyにおけるサイト上のデータはGraphQLを利用した独自のデータレイヤーとして分離して保持されます。 そのため、外部CMS（例えばContentful）でのデータ変更時にサイト全体をビルドし直すことなく、該当データと関連するコンポーネントのみを再ビルドすることで、ビルド時間の短縮を行なってくれます。
これもデータ量やサイト構成によって異なりますが、ケースによっては数秒でビルドが完了するようになります。
またGatsbyではビルド時に、サイトに組み込まれる画像の最適化（リサイズ、フォーマット変換など）を行ってくれるのですが、それらの処理を並行化してくれたりもします。
3. Incremental Preview Builds
上述のIncremental Cloud Buildsと同等の仕様に加え、下記の機能も追加されるビルドです。
- プレビューサイトのビルドインジケーター（サイト上にビルド状況をリアルタイムで表示してくれるナビゲーション）
- プレビューサイトをビルドするためのサーバーをホットスタンバイとして維持しておくための細かな仕様
各インクリメンタルビルドの動作条件
基本はGatsbyのバージョン3以降を利用する必要があります。
| 条件 | |
|---|---|
| Incremental builds | Gatsby v3 or later |
| Incremental Cloud Builds | Gatsby v3 or later "Enable cloud builds" にチェック |
| Incremental Preview Builds | Gatsby v3 or later "Enable CMS Preview builds"にチェック |
ビルドログ中で確認するフラグ
各ビルドにおいて、どのインクリメンタルビルドが動作しているかはログ中のフラグで確認できます。
| ビルドログ中に現れるフラグ | |
|---|---|
| Incremental builds | BUILDS |
| Incremental Cloud Builds | CLOUD_BUILDS |
| Incremental Preview Builds | INCREMENTAL_PREVIEWS |
どの環境で動くか
Gatsby Cloud上では1サイトごとに下記の環境が生成されます。
- Production ... 指定した1つのブランチの変更をトリガーとする本番用ビルドです。例えばmainやmasterなどをこれに充てます。
- Pull Requests ... PRの作成を検知してビルドしてくれる環境です。各ビルドごとに個別のURLを発行してくれます。
- CMS Preview ... 主に本番反映前に確認を行うための環境です。Productionとは別の環境変数を指定することで別のCMSやエンドポイントを利用したビルドが可能です。またビルドをトリガーするエンドポイントもProductionとは独立しています。
| Production eg. main, master |
PR builds | CMS Preview | Local | |
|---|---|---|---|---|
| Incremental builds | ○ Incremental Cloud Buildsが OFFの場合のみ こちらが有効化 |
× | × | ○ |
| Incremental Cloud Builds | ○ | × | × | × |
| Incremental Preview Builds | × | × | ○ | × |
最後に
以上、ドキュメントを見てもパッと答えがわからなかったのですが、整理すると意外と簡単でした。 静的サイトのビルド時間の改善を行う際にぜひご参照ください。
クラスメソッドではJamstackの構築支援を行なっています。お気軽にご相談ください。
参考
- https://support.gatsbyjs.com/hc/en-us/articles/360053099253-Gatsby-Builds-Full-Incremental-and-Cloud
- https://www.gatsbyjs.com/blog/2020-04-22-announcing-incremental-builds/
